<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .main {
            background-color: #fff;
        }
        .main ul li {
            padding: 0 15px;
        }
        .li_box {
            border-bottom: 1px solid #e8e8e8;
            position: relative;
        }
        .main ul li:last-child .li_box {
            border-bottom: none;
        }
        .main ul li .li_box input {
            width: 100%;
            color: #999;
            font-size: 14px;
            line-height: normal;
            padding-top: 17px;
            padding-bottom: 17px;
            background-repeat: no-repeat;
            background-size: 15px auto;
            background-position: left center;
            /*padding-left: 55px;*/
            box-sizing: border-box;
            display: block;
            vertical-align: middle;
        }
        .phone{
            padding-left: 100px;
        }
        .password{
            padding-left: 40px;
        }
        .main ul li .li_box input::-webkit-input-placeholder {
            color: #999;
            font-size: 14px;
        }
        .main ul li:nth-child(1) input {
        	background-image: url('../image/login_icon1.png');
        }
        .main ul li:nth-child(2) input {
        	background-image: url('../image/login_icon2.png');
        }
        .forgot_password_box {
        	overflow: hidden;
        }
        .forgot_password_box .forgot_password {
        	float: right;
        	font-size: 13px;
        	color: #999;
        	padding: 10px 15px;
        }
        .btn_box {
        	margin-top: 15px;
        	padding: 0 15px;
        }
        .btn_box .btn {
        	height: 40px;
        	line-height: 40px;
        	background-color: #e62442;
        	color: #fff;
        	text-align: center;
        	border-radius: 5px;
        	font-size: 16px;
        }
        .btn_box .register {
        	background-color: transparent;
        	color: #e62442;
        	margin-top: 22px;
        }
        .btn_box .apply {
        	background-color: transparent;
        	color: #e62442;
        	margin-top: 22px;
        	display: none;
        }
        .other_login {
        	margin-top: 45px;
        }
        .other_login .other_login_t {
        	display: -webkit-box;
        	-webkit-box-align: center;
        	-webkit-box-pack: center;
        }
        .other_login .other_login_t .line {
        	width: 79px;
        	height: 1px;
        	background-color: #999;
        }
        .other_login .other_login_t .title_p {
        	font-size: 13px;
        	color: #999;
        	padding: 0 9px;
        }
        .other_login .other_login_b {
        	margin-top: 32px;
        	overflow: hidden;
        	padding: 0 82px;
        }
        .other_login .other_login_b .facebook_icon {
        	width: 35px;
        	float: left;
        }
        .other_login .other_login_b .wechat_icon {
        	width: 42px;
        	float: right;
        }
        input {
            outline: none;
        }
        .pre_num{
            position: absolute;
            top: 0;
            left: 20px;
            line-height: 50px;
            color: #999;
        }
        .phone_prefix{
            position: absolute;
            left:30px;
            top:15px;
            height:20px;
            line-height: normal;
        }
    </style>
</head>
<body>
    <div class="main">
    	<ul>
    		<li>
    			<div class="li_box">
            <script id="prefixoptionTemp" type="text/x-dot-template">
              {{ for(var x in it.phonePrefix) { }}
                <option value="{{= it.phonePrefix[x] }}">{{= it.phonePrefix[x] }}</option>
              {{ } }}
            </script>
            <select id="prefixoption" class="phone_prefix" name="prefix">

            </select>
    				<input class="phone" type="number" placeholder="请输入手机号">
    			</div>
    		</li>
    		<li>
    			<div class="li_box">
    				<input class="password" type="password" placeholder="请输入密码">
    			</div>
    		</li>
    	</ul>
    </div>
    <div class="forgot_password_box">
    	<div class="forgot_password" onclick="fnForgetPassword();" tapmode>忘记密码</div>
    </div>
    <div class="btn_box">
    	<div class="btn" onclick="login();" tapmode>登录</div>
    	<!-- <div class="btn register" onclick="fnRegister();" tapmode>注册账号</div> -->
    	<!-- <div class="btn apply">申请成为骑手</div> -->
    </div>
    <div class="other_login">
    	<!-- <div class="other_login_t">
    		<div class="line"></div>
    		<div class="title_p">第三方登录</div>
    		<div class="line"></div>
    	</div> -->
  <!--   	<div class="other_login_b">
    		<img class="facebook_icon" src="../image/facebook_icon.png">
    		<img class="wechat_icon" src="../image/wechat_icon.png">
    	</div> -->
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){
        $('.phone').focus();
        var prefix = {'phonePrefix' : ['60',
          '70',
          '001']
        };
    		var evaluation = doT.template( $api.dom('#prefixoptionTemp').innerHTML );
    		$api.dom( '#prefixoption' ).innerHTML = evaluation( prefix );
        api.addEventListener({
            name: 'closeLoginEvent'
        }, function(ret, err) {
            if (ret) {
                api.closeWin();
            }
        });
    };

    //登录
    function login () {
        var phone = '60' + $('.phone').val();
        var password = $('.password').val();
        if(phone == '') {
            api.toast({
                msg: '请输入手机号码',
                location : "middle"
            });
            return;
        }
        if (isMobile(phone) == 0) {
            api.toast({
                msg: '手机号格式错误',
                location : "middle"
            });
            return;
        }
        if (!$('.password').val()) {
            api.toast({
                msg: '请输入密码',
                location : "middle"
            });
            return;
        }
        openLoading();
        api.ajax({
            url: rootPath+'/api/login/shop_login',
            method: 'post',
            data: {
                values: {
                    phone : phone,
                    password : password
                },
            }
        },function(ret, err){
          alert(JSON.stringify(ret));
            if (ret) {
                if(ret.status == 200) {
                    successLogin(ret);
                    api.sendEvent({
                        name: 'reloadSocketEvent',
                    });
                    setTimeout(function(){
                        api.closeWin();
                    },500)
                }else {
                    var msg = ret.msg?ret.msg:'账号或密码错误';
                    api.toast({
                        msg: msg,
                        location:'middle'

                    });
                }
            } else {
                alert(JSON.stringify(err.msg));
            }
            closeLoading();
        });
    }

    function weixinLogin() {
        // api.openWin({
        //     name: 'bind_fail',
        //     url: './bind_fail.html',

        // });
        // return;
        // api.showProgress();
        // setTimeout(function(){
        //     api.hideProgress();
        // },3000);
        //模拟登录
        var wx_user = {
            status: true,      //布尔型；true||false
            openid: 'o4Ok4s7OUci1kxOuE--5UfRV1JOc1',        //字符串类型；普通用户的标识，对当前开发者帐号唯一
            nickname: '秋刀鱼',      //字符串类型；普通用户昵称
            sex: 1,            //数字类型；普通用户性别，1为男性，2为女性
            headimgurl: 'http://wx.qlogo.cn/mmopen/qd3u5IHSYTicn2LsBR0rQqYfCice7fXdocHxQ7q18EdiaR1ibUmZKYqhfiaxob1Xg4kt7t4icB',    //字符串类型；用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空
            privilege: [],     //数组类型；用户特权信息，如微信沃卡用户为（chinaunicom）
            unionid: 'odWpPwesZJo9BXaMdYHYMtBuXsuE'        //字符串类型；用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。
        }
        var user = $api.getStorage('user_data');
        if(!user || user.openid == '') {
            api.openWin({
                name: 'bind_fail',
                url: 'bind_fail.html',

            });
            return;
        }

        wxLogin(wx_user,wx_user.openid);
        return;
        //真实登录
        var wx = api.require('wx');
        wx.auth({
            apiKey: 'wxbcbcc195b8b74b78'
        }, function(ret, err){
            if(ret.status){
                code = ret.code;
                wx.getToken({
                    apiKey: 'wxbcbcc195b8b74b78',
                    apiSecret: '6b2b3fcf75a8deb248185768b396ecef',
                    code: code
                },function(ret, err){
                    if(ret.status){
                        //获取用户信息
                        accessToken = ret.accessToken;
                        openId = ret.openId;
                        getUserInfo(accessToken,openId);
                    }else{
                        alert(err.msg);
                    }
                    api.hideProgress();
                });
            }else{
                alert(err.msg);
            }
        });
    }

    function fnGetUserInfo(accessToken,openId) {
        var wx = api.require('wx');
        wx.getUserInfo({
            accessToken: accessToken,
            openId: openId
        }, function(ret,err){
            if(ret.status){
                wx_login(ret,openId);
            }else{
                alert(err.msg);
            }
        });
    }

    function wxLogin(userInfo,openId) {
       api.ajax({
            url: rootPath + '/api/login/wx_login',
            method: 'post',
            data: {
                values: {
                    openId: openId,
                },
            }
        },function(ret, err){
            // alert(JSON.stringify(ret))
            if(ret) {
                if(ret.status == 200) {
                    successLogin(ret);
                }else {
                    api.toast({
                        msg: '该微信还没绑定，请先去绑定',
                        location : 'middle'
                    });
                    setTimeout(function(){
                        api.openWin({
                            name: 'bind_fail',
                            url: 'bind_fail.html',

                        });
                    },1000)
                }
            }else {
                showError(err.code,err.msg);
            }
        });
    }

    function fnForgetPassword() {
        api.openWin({
            name: 'forgot_password',
            url: './forgot_password.html',
        });
    }

    function fnRegister() {
        api.openWin({
            name: 'register',
            url: './register.html',
        });
    }
</script>
</html>
